<template>
	<view class="page-publish">
		<view class="topbar">
			<cl-topbar title="发布内容" color="#fff" background-color="#F5393B">
				<template slot="append">
					<cl-button type="text">发布</cl-button>
				</template>
			</cl-topbar>
		</view>
		<!-- 文本域 -->
		<view class="content">
			<cl-textarea placeholder="分享新鲜事"></cl-textarea>
		</view>
		<!-- 上传 -->
		<view class="upload">
			<cl-icon name="plus" color="#C0C0C0" :size="100"></cl-icon>
		</view>
		<!-- 位置 -->
		<view class="position">
			<cl-icon name="cl-icon-map-fill" color="#999999" :size="36"></cl-icon>
			<cl-text value="所在位置？" color="#999999" :margin="[0, 0, 6, 10]"></cl-text>
		</view>
		<!-- 底部功能区 -->
		<view class="bottom">
			<view class="keyboard">
				<image src="/static/icon/keyboard.png" mode="" />
			</view>
			<view class="features">@</view>
			<view class="features">#</view>
			<view>
				<cl-icon name="cl-icon-smile-border"></cl-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.page-publish {
	position: relative;
	height: 100%;
	.topbar {
		.cl-topbar__icon {
			padding: 0 40rpx 0 0;
		}
		/deep/ .cl-button__text {
			color: #ffffff;
			font-size: 26rpx;
		}
	}
	.content {
		padding: 46rpx 40rpx;
		.cl-textarea {
			min-height: 378rpx;
			background-color: #eeeeee;
		}
	}
	.upload {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 237rpx;
		height: 237rpx;
		margin-left: 40rpx;
		background: #eeeeee;
		border-radius: 10rpx;
	}
	.position {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 40rpx;
		bottom: 112rpx;
		width: 184rpx;
		height: 57rpx;
		border: 1rpx solid #eeeeee;
		border-radius: 29rpx;
	}
	.bottom {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 94rpx;
		padding: 0 34rpx;
		box-shadow: 0 6rpx 10rpx 0 rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
		.keyboard {
			flex: 1;
			image {
				width: 41rpx;
				height: 45rpx;
			}
		}
		.features {
			margin-right: 58rpx;
		}
	}
}
</style>
